<template lang="pug">
  Modal.lzw-modal-style-1.has-bg.workflow-modal(v-model="showModal" fullscreen title="新增流程")
    Form(ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="110")
      .workflow-header
        Row(type="flex" justify="start")
          Col(:md="{ span: 24 }" :lg="{ span: 12 }" :xl="{ span: 8 }" :xxl="{span: 8}")
            FormItem.ivu-form-item-required(label="流程名称：")
              Input(v-model="formValidate.processName")
          Col(:md="{ span: 24 }" :lg="{ span: 12 }" :xl="{ span: 8 }" :xxl="{span: 8}")
            FormItem.ivu-form-item-required(label="适用表单：")
              Select(v-model="formValidate.businessConfigID" label-in-value placeholder="请选择" @on-change="businessChange")
                Option(v-for="(item, index) in businessesArr" :value="item.id" :key="index") {{ item.actionDesc }}
      .workflow-container
        .flow-step(v-for="(item, index) in formValidate.details")
          .step-title 步骤 {{index+1}}：
          .step-content
            Row(type="flex" justify="start")
              Col(:md="{ span: 24 }" :lg="{ span: 12 }" :xl="{ span: 8 }" :xxl="{span: 8}")
                FormItem.ivu-form-item-required(label="步骤名称：")
                  Input(v-model="formValidate.details[index].name")
              Col(:md="{ span: 24 }" :lg="{ span: 12 }" :xl="{ span: 8 }" :xxl="{span: 8}")
                FormItem.ivu-form-item-required(label="审批人：")
                  Select(v-model="formValidate.details[index].operator" placeholder="请选择" @on-change="operatorChange(index)")
                    Option(v-for="(item, idx) in operatorArr" :value="item.key" :key="idx") {{ item.value }}
              template(v-if="formValidate.details[index].flag_operator")
                Col(:md="{ span: 24 }" :lg="{ span: 12 }" :xl="{ span: 8 }" :xxl="{span: 8}")
                  FormItem.ivu-form-item-required(label="指定审批人：")
                    Select(v-model="formValidate.details[index].operatorID" filterable placeholder="请选择" @on-change="operatorIDChange(index)")
                      Option(v-for="(item, idx) in accountList" :value="item.id" :key="idx") {{ item.name }}
            Row(type="flex" justify="start")
              Col(:md="{ span: 24 }" :lg="{ span: 12 }" :xl="{ span: 8 }" :xxl="{span: 8}")
                FormItem.ivu-form-item-required(label="抄送人：")
                  Select(v-model="formValidate.details[index].cc"  placeholder="请选择" @on-change="CCChnage(index)")
                    Option(v-for="(item, idx) in operatorArr" :value="item.key" :key="idx") {{ item.value }}
              template(v-if="formValidate.details[index].flag_cc")
                Col(:md="{ span: 24 }" :lg="{ span: 12 }" :xl="{ span: 8 }" :xxl="{span: 8}")
                  FormItem.ivu-form-item-required(label="指定抄送人：")
                    Select(v-model="formValidate.details[index].ccid" filterable placeholder="请选择" @on-change="CCIDChange(index)")
                      Option(v-for="(item, idx) in accountList" :value="item.id" :key="idx") {{ item.name }}
              Col(:md="{ span: 24 }" :lg="{ span: 12 }" :xl="{ span: 8 }" :xxl="{span: 8}")
                Button.ml-40(type="info" @click="addStep(index)") 添加下一步
                Button.ml-10(type="error" @click="deleteStep(index)" :disabled="formValidate.details.length == 1") 删除
    template(slot="footer")
      Button(@click="showModal = false") 取消
      Button(type="info" @click="saveWorkFlow") 保存
            
</template>

<script>
import workflowApi from '@/api/workflow.api.js'
export default {
  props: {
    businessesArr: Array,
    operatorArr: Array,
    accountList: Array
  },
  data () {
    return {
      showModal: false,
      designativeApprover: false, // 是否指定审批人
      designativeCCList: false, // 是否指定抄送人
      formValidate: {
        workFlowID: '',
        processName: '', // 流程名称
        businessName: '', // 适用表单名称
        businessConfigID : '', // 适用表单ID
        details: [
          {
            detailID: '',
            name: '',
            operator: '',
            operatorID: '',
            operatorName: '',
            cc: '',
            ccid: '',
            ccName: '',
            sort: 1,
            flag_operator: false,
            flag_cc: false
          }
        ]
      },
      ruleValidate: {
        // processName: [
        //   { required: true, message: '请输入名称' }
        // ],
        // businessConfigID: [
        //   { required: true, message: '请选择', trigger: 'change' }
        // ]
      }
    }
  },
  methods: {
    openModal () {
      this.showModal = true
    },
    businessChange (val) {
      this.formValidate.businessName = val.label
    },
    operatorChange (index) {
      if (this.formValidate.details[index].operator === '4') {
        this.formValidate.details[index].flag_operator = true
      } else {
        this.formValidate.details[index].flag_operator = false
        this.formValidate.details[index].operatorID = ''
        this.formValidate.details[index].operatorName = ''
      }
    },
    CCChnage (index) {
      if (this.formValidate.details[index].cc === '4') {
        this.formValidate.details[index].flag_cc = true
      } else {
        this.formValidate.details[index].flag_cc = false
        this.formValidate.details[index].ccid = ''
        this.formValidate.details[index].ccName = ''
      }
    },
    operatorIDChange (index) {
      let id = this.formValidate.details[index].operatorID
      let obj = this.accountList.find(item => {
        return item.id === id
      })
      this.formValidate.details[index].operatorName = obj.name
    },
    CCIDChange (index) {
      let id = this.formValidate.details[index].ccid
      let obj = this.accountList.find(item => {
        return item.id === id
      })
      this.formValidate.details[index].ccName = obj.name
    },
    addStep (index) {
      this.formValidate.details.push({
        detailID: '',
        name: '',
        operator: '',
        operatorID: '',
        operatorName: '',
        cc: '',
        ccid: '',
        ccName: '',
        sort: index + 1,
        flag_operator: false,
        flag_cc: false
      })
    },
    deleteStep (index) {
      console.log(index)
      this.formValidate.details.splice(index, 1)
      console.log(this.formValidate)
    },
    saveWorkFlow () {
      console.log(this.formValidate)
      workflowApi.PostWorkFlow(this.formValidate).then(res => {
        if (res.data.success) {
          this.showModal = false
          this.formValidate = {
            workFlowID: '',
            processName: '', // 流程名称
            businessName: '', // 适用表单名称
            businessConfigID : '', // 适用表单ID
            details: [
              {
                detailID: '',
                name: '',
                operator: '',
                operatorID: '',
                operatorName: '',
                cc: '',
                ccid: '',
                ccName: '',
                sort: 1,
                flag_operator: false,
                flag_cc: false
              }
            ]
          }
          this.$emit('get-list')
        } else {
          this.$Message.error({
            content: res.data.message,
            duration: 10,
            closable: true
          })
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
  .workflow-modal{
    .workflow-header{
      border-bottom: 1px solid #e8eaec;
    }
    .flow-step{
      padding-top: 24px;
      display: flex;
      .step-title{
        padding-top: 7px;
        width: 70px;
        margin-right: 15px;
        position: relative;
        font-weight: bold;
        font-size: 16px;
      }
      .step-content{
        flex: 1;
      }
    }
  }
</style>
